<template>
    <div class="meteor">
        <span class="meteor-span" v-for="meteor in meteors" :key="meteor.id" :style="meteor.style"></span>
    </div>
</template>

<script setup lang="ts">
import { onBeforeMount, reactive } from 'vue';
import type Meteor from '@/types/Meteor';

const meteors = reactive< Meteor[]>([]);

onBeforeMount(()=>{
    gengerateMeteor()
})

const gengerateMeteor = ()=>{
    for (let i = 1; i <= 10; i++) {
    const meteor = {
        id: i,
        style: {
            // 这里简单设置一些不同的位置、延迟和时长示例，你可以按照更复杂的逻辑修改
            top: `${Math.ceil(Math.random() * 300)}px`, // 随机生成0到300px的top值
            right: `${Math.ceil(Math.random() * 1000)}px`, // 随机生成0到1000px的right值
            left: 'initial',
            animationDelay: `${(Math.random() * 2).toFixed(2)}s`, // 随机生成0到2秒的延迟，保留2位小数
            animationDuration: `${(Math.random() * 3 + 1).toFixed(2)}s` // 随机生成1到4秒的时长，保留2位小数
        }
    };
    meteors.push(meteor)
}
}

</script>

<style scoped>
.meteor-span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background-color: #fff;
    border-radius: 50%;
    /* 发光效果 */
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1),
    0 0 0 8px rgba(255, 255, 255, 0.1),
    0 0 20px rgba(255, 255, 255, 1);
    animation: animate 3s linear infinite;
    opacity: 0;
}

.meteor-span::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    height: 3px;
    background: linear-gradient(90deg, #fff, transparent);
}

@keyframes animate {
    0% {
        transform: rotate(315deg) translateX(0);
        opacity: 0;
    }
    90%{
        opacity: 1;
    }
    100% {
        transform: rotate(315deg) translateX(-1000px);
    }
}

</style>